HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or server which makes it much easier to work against the stateless nature of HTTP. It allows the web pages to store the data locally in the user’s browser.
Following are the advantages of HTML5 Web Storage.
- It can store 5 to 10 MB data. That is far more than what cookies allow.
- HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead than cookies and in turn, increase the performance of the application.
- Apps can work both online and offline.
- This API is easy to learn and use.
New features fo HTML5
HTML is a markup language designed for processing, defining and formatting the texts to be displayed in a web browser.The HTML5 is the latest vresion and has features like:
- Local Storage and session storage instead of cookies
- New form elements like date,time,url,range,color
- Canvas for 2D drawing.
- Media elements like audio and video
- New semantic elements like nav, header, footer,section and article.
Canvas vs SVG
SVG stands for Scalable Vector Graphics where Canvas is pixel graphics.
It is a resolution-independent,it will not lose its quality when resized or zoomed.But canvas is resolution-independent.The quality will be affected when it is zoomed or resized.
SVG is written in XML format.Canvas is drawn with JavaScript.
SVG can be modified through CSS and Script.But in Canvas is suitable only through JavaScript.
HTML vs XHTML
The differences between HTML and XHTML are:
- HTML is an application of Standard Generalized Markup Language. Whereas, XML is an application of Extensible Markup Language.
- The first one is a static Web Page whereas the later one is a dynamic Web Page.
- HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
- HTML is about displaying information whereas XHTML is about describing the information.
CSS cascading rule
Three major ways of CSS cascades:
- Elements — The same CSS style can be applied to multiple elements to achieve the same style.
- Multiple Style One Element — Multiple styles can be applied to a particular HTML element to achieve a unique style.
- Same style, Multiple Pages — The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.
section, div , article tags
<section>, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. A section normally has a heading (title) and maybe a footer too.
<article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
CSS preprocessors
If you’re working on a medium to large project, it’d be a good idea to use a CSS preprocessor. They allow you to write more concise CSS, split it up into multiple files and use a large number of very useful functions and mixins (you can even create your own!), along with variables.
The main players are Sass (also referred to as SCSS), LESS and Stylus, although arguably Sass is the biggest.
Properites of Flexbox
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
About !Important
When you’re wrestling with specificity, trying to override that one style, you may be tempted to add !important to your style. Think very carefully before you do so! It may seem harmless, but if you do this all over the place, you will soon find yourself in a big mess that you cannot get out of.
Block-level vs Inline elements
A block-level element is drawn as a block that stretches to fill the full width available to it i.e, the width of its container and will always start on a new line.Elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.
Inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page.
Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.
